<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        position: relative;
      }
      .list-item {
        width: 100px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .red {
        background-color: red;
        height: 20px;
        width: 20px;
        position: absolute;
      }
      img {
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="container">
        <div v-for="title in titles" class="list-item">{{ title }}</div>
      </div>

      <div v-for="(item,index) in list" class="container">
        <div class="red" v-if="index === 0">
          <img src="image/1.jpg" alt="" />
        </div>
        <div class="red" v-if="index === 1">
          <img src="image/2.jpg" alt="" />
        </div>
        <div class="red" v-if="index === 2"></div>
        <div class="list-item">{{ item.name }}</div>
        <div class="list-item" v-for="(val,key) in item.score[0]">
          {{ val }}
        </div>
        <div class="list-item">{{ sum(item.score[0]) }}</div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            titles: ["姓名", "数学", "语文", "英语", "地理", "历史", "总分"],
            list: [
              {
                name: "肖枫",
                score: [
                  {
                    math: 99,
                    chinese: 100,
                    english: 100,
                    geography: 99,
                    history: 98,
                  },
                ],
              },
              {
                name: "安澜",
                score: [
                  {
                    math: 90,
                    chinese: 98,
                    english: 89,
                    geography: 96,
                    history: 100,
                  },
                ],
              },
              {
                name: "路小北",
                score: [
                  {
                    math: 88,
                    chinese: 87,
                    english: 77,
                    geography: 86,
                    history: 78,
                  },
                ],
              },
              {
                name: "许巍",
                score: [
                  {
                    math: 39,
                    chinese: 40,
                    english: 76,
                    geography: 90,
                    history: 59,
                  },
                ],
              },
            ],
          };
        },
        methods: {
          sum(obj) {
            let sum = 0;
            for (let key in obj) {
              sum += obj[key];
            }
            return sum;
          },
        },
      });
    </script>
  </body>
</html>
